<template>
    <div class="chatAd" v-if='banner'>

            <a class='chatBanner' href="javascript:;">
                <img :src="path" alt="">
            </a>

            <div class="chatAd-footer">
                    <ul>
                        <li>公司名称：<br>{{company}}</li>
                        <li>联系电话：<br>{{phone}}</li>
                        <li>邮箱：<br>{{email}}</li>
                       
                    </ul>

            </div>
    </div>
</template>


<script>
import chat from "../libs/chat";

export default {
  name: "ateving",
  data() {
    return {
      banner: false,
      company: "",
      phone: "",
      email: "",
      path: ""
    };
  },

  props: ["adData"],

  methods: {
    atevingBox: function() {
        if (this.adData.enable === 1) {
          this.company = this.adData.title;
          this.phone = this.adData.phone;
          this.email = this.adData.email;
          this.path = this.adData.path;
          console.log(this.adData);
        }
    },
    changeBanner:function(){
        this.banner =! this.banner
    }
  },

  mounted() {
    //动态设置高度
    let height = $(window).height();

    $(window).resize(() => {
      height = $(window).height();
    });

     if (this.adData) {
       this.atevingBox();
     }
  }
};
</script>


<style scoped>
ul {
  padding: 0;
}

li {
  list-style-type: none;
}
.chatAd {
  position: absolute;
  right: 0;
  top: 4.5rem;
  width: 35%;
  height: 89.5%;
  border-left: 1px solid #eaeaea;
  background: #fff;
}

.block {
  display: block;
}

.chatAd .chatBanner {
  display: block;
  width: 100%;
  background: #aaa;
}

.chatAd .chatBanner p {
  text-indent: 1rem;
}

.chatAd a img {
  width: 100%;
  height: 100%;
}

.chatAd-footer {
  margin: 1.5rem 1rem;
  width: 9rem;
}

.chatAd-footer ul {
  line-height: 1.6rem;
  margin-top: 0.5rem;
}

.chatAd-footer ul li {
  margin: 0;
  width: 100%;
  font-size: 12px;
}
</style>

